<template>
    <div class="volunteer">
          <!--下拉选择时间器-->
          <span style="position: fixed;z-index: 999;right: 607px;top: 756px;">
              <el-select  :popper-append-to-body="false" class="el-select" @change="choicYear(value)" v-model="value" :placeholder="year">
             <el-option
               v-for="item in options1"
               :key="item.value"
               :label="item.label"
               :value="item.value">
             </el-option>
             </el-select>
           </span>
          <!--下拉选择时间器-->

        <div id="volunteer">

        </div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import autotooltip from '../../../common/echarts-auto-tooltip'
    export default {
        name: "Volunteer",
        data(){
          return{
            options: {
              grid: {
                width: "89%",
                height: "80%",
                // top: "4%",
                bottom:"10%",
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#6a7985'
                  }
                }
              },//显示浮层
              xAxis: {
                type: 'category',
                splitLine: {
                  show: false,
                },
                axisLabel: {
                  show: true,
                  color: "#4178a7"
                },
                axisTick: {
                  show: false
                },
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']
              },
              yAxis: {
                type: 'value',
                max: 700,
                min:0,
                splitLine: {
                  show: false,
                },
                axisLabel: {
                  show: true,
                  color: "#4178a7"
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false,
                },
              },
              series: [{
                name: '人数',
                data: [195, 300, 350, 500, 400, 360, 430,360,500,600,500,600],
                type: 'line',
                label: {
                  show: true,
                  formatter: '{c}人'
                },
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(21, 231, 198, 0.8)'
                    }, {
                      offset: 0.8,
                      color: 'rgba(0, 75, 94, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 76, 95, 0.1)',
                    shadowBlur: 10
                  }
                },
                itemStyle: {
                  color: "#00bda5"
                }


              }]
            },
            options1:[],//下拉选择的数组
            value:'',//下拉选择框的测试数据
            selectTime:'',//下拉选择的时间年月
            year:'',
            month:'',
            count:null,//循环次数
            autoplay:null,//ehcarts轮播插件

          }
        },
        mounted(){
          this.volunteerDetail();
          this.getYearMonth();
        },
        methods:{

          choicYear(y) {
            let that = this;
            console.log('当前年月日：',y);
            that.$http.get("/api/DataCenterApi/getVoluntList?vollege_id="+that.$util.vollege_id+"&year="+y,null,r=>{
              // console.log('获得志愿详情单的数据为：',r.data);
              that.count = r.data.length;
              let months = [];//月份数组
              let series_data=[];  //series中data的数值
              r.data.forEach(function (v) {
                months.push(v.month);
                series_data.push(v.num);
              });
              console.log('months',months);
              console.log('series_data',series_data);
              that.options.xAxis.data=months;
              that.options.series[0].data=series_data;
              let myChart = echarts.init(document.getElementById('volunteer'));
              myChart.setOption(that.options);
              that.autoplay=null;
              that.autoplay=autotooltip;
              // that.autoplay.autoHover(myChart,that.options, that.count, 1000);//使用轮播插件
              // that.auto;

            });




          },//选择月份

          getYearMonth(){
            let that = this;
            // that.options1=that.$util.selectYearMonth();
            that.options1 = that.$util.selectYear2(10).reverse();
            // console.log('年份数组为：',arr);


            that.year = new Date().getFullYear()+'';
            that.month = (new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1))+'';
            console.log('year:',that.year,'month:',that.month);

          },//选择月份




          volunteerDetail(){
            let that = this;
            that.$http.get("/api/DataCenterApi/getVoluntList?vollege_id="+that.$util.vollege_id+"&year="+new Date().getFullYear(),null,r=>{
                console.log('获得志愿详情单的数据为：',r.data);
              that.count = r.data.length;
              let months = [];//月份数组
              let series_data=[];  //series中data的数值
              r.data.forEach(function (v) {
                  months.push(v.month);
                  series_data.push(v.num);
              });
              console.log('months',months);
              console.log('series_data',series_data);
              that.options.xAxis.data=months;
              that.options.series[0].data=series_data;
              let myChart = echarts.init(document.getElementById('volunteer'));
              myChart.setOption(that.options);
              that.autoplay=autotooltip;
              that.autoplay.autoHover(myChart,that.options, that.count, 1000);//使用轮播插件
              // that.auto =autotooltip.autoHover(myChart,that.options, that.count, 1000);//使用轮播插件
            });


          },
        },

    }
</script>

<style scoped>
  .volunteer{
    width: 695px;
    height: 240px;
  }
  #volunteer{
    width: 695px;
    height: 240px;
  }

</style>
